<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Dynamic Image Transformation for Amazon CloudFront</title>
  <script src="demo-ui-config.js"></script>
  <script src="modules/jquery.slim.min.js"></script>
  <script src="modules/popper.min.js"></script>
  <link rel="stylesheet" href="modules/bootstrap.min.css">
  <script src="modules/bootstrap.min.js"></script>

  <script src="scripts.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm header">
        <span class="header-text">Dynamic Image Transformation for Amazon CloudFront</span><span class="header-italics"><em>&nbsp;Demo</em></span>
      </div>
    </div>
    <div class="row content">
      <div class="col-sm">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Image Source</h5>
            <form>
              <div class="form-group">
                <small id="lbl-bucket-name" class="form-text text-muted">Enter the name of an Amazon S3 bucket in your
                  account that contains original image files.</small>
                <input type="text" class="form-control" id="txt-bucket-name" aria-describedby="lbl-bucket-name"
                  placeholder="Bucket name">
                <small id="lbl-key-name" class="form-text text-muted">Enter the name of an original image file (with
                  extension) stored in the above Amazon S3 bucket.</small>
                <input type="text" class="form-control" id="txt-key-name" aria-describedby="lbl-key-name"
                  placeholder="Image key">
              </div>
              <button id="btn-import-original" type="button" class="btn btn-primary"
                onclick="importOriginalImage()">Import</button>
            </form>
          </div>
        </div>
        <div class="card card-original-image">
          <div class="card-body">
            <h5 class="card-title">Original Image</h5>
            <h6 class="card-subtitle mb-2 text-muted" id="gallery-details"></h6>
            <img id="img-original" src="#" alt="Original Image" />
            <br>
            <a href="#" data-toggle="tooltip" title="" data-placement="top"
              data-original-title="Be sure that you're providing a bucket name that's in your account and specified in your SOURCE_BUCKETS environment variable, as well as a properly-spelled image name with the file extension (ex. sample.jpg)."
              style="font-size:0.8em">Having trouble?</a>
          </div>
        </div>
      </div>
      <div class="col-sm">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Editor</h5>
            <form>
              <hr>
              <div class="row">
                <div class="col-sm">
                  <div class="form-group">
                    <label for="editor-width">Width</label>
                    <input type="number" class="form-control" id="editor-width" placeholder="200">
                  </div>
                </div>
                <div class="col-sm">
                  <div class="form-group">
                    <label for="editor-height">Height</label>
                    <input type="number" class="form-control" id="editor-height" placeholder="200">
                  </div>
                </div>
                <div class="col-sm">
                  <label for="editor-resize-mode">Resize Mode</label><br>
                  <select id="editor-resize-mode">
                    <option selected>Disabled</option>
                    <option>cover</option>
                    <option>contain</option>
                    <option>fill</option>
                    <option>inside</option>
                    <option>outside</option>
                  </select>
                </div>
              </div>
              <hr>
              <div class="row">
                <div class="col-sm">
                  <div class="form-group">
                    <label for="editor-fill-color">Fill Color</label>
                    <a href="#" data-toggle="tooltip" title="" data-placement="left"
                      data-original-title="Use this to adjust the backfill color of an image that has been resized and scaled to fit the new dimensions, usually when 'Resize Mode' is set to 'Contain'."
                      style="font-size:0.8em">[?]</a>
                    <input type="text" class="form-control" id="editor-fill-color" placeholder="#FF0000">
                  </div>
                </div>
                <div class="col-sm">
                  <div class="form-group">
                    <label for="editor-background-color">Background Color</label>
                    <a href="#" data-toggle="tooltip" title="" data-placement="right"
                      data-original-title="Use this to adjust the background color of a transparent image, such as a logo."
                      style="font-size:0.8em">[?]</a>
                    <input type="text" class="form-control" id="editor-background-color" placeholder="#FF0000">
                  </div>
                </div>
              </div>
              <hr>
              <div class="row">
                <div class="col-sm">
                  <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="editor-grayscale">
                    <label class="form-check-label" for="editor-grayscale">Grayscale</label>
                  </div>
                  <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="editor-flip">
                    <label class="form-check-label" for="editor-flip">Flip</label>
                  </div>
                  <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="editor-flop">
                    <label class="form-check-label" for="editor-flop">Flop</label>
                  </div>
                </div>
                <div class="col-sm">
                  <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="editor-negative">
                    <label class="form-check-label" for="editor-negative">Negative</label>
                  </div>
                  <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="editor-flatten">
                    <label class="form-check-label" for="editor-flatten">Flatten</label>
                  </div>
                  <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="editor-normalize">
                    <label class="form-check-label" for="editor-normalize">Normalize</label>
                  </div>
                </div>
                <div class="col-sm">
                  <div class="form-group">
                    <label for="editor-rgb">RGB</label>
                    <a href="#" data-toggle="tooltip" title="" data-placement="right"
                      data-original-title="Use this to adjust the tint or coloring of your image. For example, setting a value of '255, 0, 0' will yield an image with only red channels and no greens/blues."
                      style="font-size:0.8em">[?]</a>
                    <input type="text" class="form-control" id="editor-rgb" placeholder="255, 0, 255">
                  </div>
                </div>
              </div>
              <hr>
              <div class="row">
                <div class="col-sm">
                  <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="editor-smart-crop">
                    <label class="form-check-label" for="editor-smart-crop">Smart Cropping</label>
                    <a href="#" data-toggle="tooltip" title="" data-placement="top"
                      data-original-title="Smart cropping uses Amazon Rekognition to detect faces and automatically crop the image to focus on a particular one."
                      style="font-size:0.8em">[?]</a>
                  </div>
                  <div class="form-group">
                    <label for="editor-smart-crop-index">Focus Index</label>
                    <a href="#" data-toggle="tooltip" title="" data-placement="top"
                      data-original-title="(Optional) Use this to toggle between detected faces when smart cropping is enabled. The first face detected always has a Focus Index of 0, with subsequent faces indexed incrementally. Rekognition will automatically return the first face by default."
                      style="font-size:0.8em">[?]</a>
                    <input type="number" class="form-control" id="editor-smart-crop-index" placeholder="0">
                  </div>
                </div>
                <div class="col-sm">
                  <div class="form-group">
                    <label for="editor-smart-crop-padding">Crop Padding</label>
                    <a href="#" data-toggle="tooltip" title="" data-placement="top"
                      data-original-title="(Optional) Use this to apply a quick, uniform padding to the smart-cropped image. Specifying too high of a value will throw an ImageOutOfBounds error, so more particular padding operations should be done directly using the Sharp API."
                      style="font-size:0.8em">[?]</a>
                    <input type="number" class="form-control" id="editor-smart-crop-padding" placeholder="0">
                  </div>
                </div>
              </div>
              <hr>
              <button type="button" class="btn btn-danger" onclick="resetEdits()">Reset</button>
              <button type="button" class="btn btn-success" onclick="getPreviewImage()">Preview</button>
            </form>
          </div>
        </div>
      </div>
      <div class="col-sm">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Preview</h5>
            <div>
              <img id="img-preview" alt="Preview Image" src="#" />
            </div><br>
            <div>
              Request Body:
              <a href="#" data-toggle="tooltip" title="" data-placement="top"
                data-original-title="The new, JSON-formatted image request containing Sharp API image edits before being stringified and encoded."
                style="font-size:0.8em">[?]</a>
              <pre class="preview-code-block" id="preview-request-body"></pre>
            </div><br>
            <div>
              <div class="form-group">
                <label for="preview-encoded-url">Encoded URL:</label>
                <a href="#" data-toggle="tooltip" title="" data-placement="top"
                  data-original-title="The encoded image request URL that can be used in front-end applications."
                  style="font-size:0.8em">[?]</a>
                <input type="text" class="form-control" id="preview-encoded-url" placeholder="">
              </div>
            </div>
            <a href="#" data-toggle="tooltip" title="" data-placement="top"
              data-original-title="Be sure that you haven't specified any parameters that might be out of range for the image you selected. Reference the debug console for additional error information."
              style="font-size:0.8em">Having trouble?</a>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

<script>
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })
</script>

</html>